<template>
  <Modal v-model="modal" :title="title">
    <div class="tag-modal">
      <Form :model="form" :label-width="150" ref="form" :rules="rules">
        <FormItem label="服务标签名称" prop="name">
          <Input :maxlength="20" v-model.trim="form.name" placeholder="服务标签名称..."/>
        </FormItem>
        <FormItem label="服务说明" prop="description">
          <Input type="textarea" placeholder="请输入服务说明" v-model="form.description" :maxlength="600"/>
        </FormItem>
        <FormItem label="服务标签图标">
          <PictureEditItem :uploadList="uploadList" :maxlength="1" @uploadPic="uploadPic"></PictureEditItem>
        </FormItem>
        <FormItem label="服务标签图标(商品主图)">
          <PictureEditItem :uploadList="productList" :maxlength="1" @uploadPic="productPic"></PictureEditItem>
        </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button @click="modal = false" size="large" type="text">取消</Button>
      <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">确定</Button>
    </div>
</Modal>
</template>
<script>
import PictureEditItem from '@/components/PictureEditItem'
import { preFixPath }  from '@/util'
export default {
  components: {
    PictureEditItem
  },
  data() {
    const validateName = (rule, value, callback) => {
      if (value.trim() === '') {
        callback(new Error('请输入服务标签名称'))
      } else if (value && value.length < 2) {
        callback(new Error('服务标签名称不能少于两个字'))
      } else if (value && value.length > 6) {
        callback(new Error('服务标签名称不能大于六个字'))
      } else {
        callback()
      }
    }
    return {
      id: null,
      modal: false,
      title: '新增服务标签',
      btnDisabled: false,
      rules: {
        name: [
          { required: true, validator: validateName, trigger: "blur" }
        ],
        description: [
          { required: true, message: '请输入服务说明', trigger: "blur" }
        ]
      },
      form: {
        name: '',
        headImage: '',
        description: '',
        productImage: ''
      },
      flag: false,
      uploadList: [],
      productList: []
    }
  },
  methods: {
    uploadPic(val) {
      this.form.headImage = val.length > 0 ? val[0].imgUrl : ''
    },
    productPic(val) {
      this.form.productImage = val.length > 0 ? val[0].imgUrl : ''
    },
    resetForm() {
      this.$refs.form.resetFields()
      this.form = {
        name: '',
        headImage: '',
        description: ''
      }
      this.flag = false
      this.btnDisabled = false
      this.title = '新增服务标签'
      this.uploadList = []
      this.productList = []
    },
    updateForm(id) {
      this.resetForm()
      this.id = null
      if (id) {
        this.getInfo(id)
        this.title = '编辑服务标签'
      } else {
        this.openModal()
      }
    },
    openModal() {
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    getInfo(id) {
      this.id = id
      this.$jsonPost(`/product/server/tag/detail/${id}`).then(data =>{
        this.form.name = data.name
        this.uploadList = data.headImage ? [{
          imgUrl: data.headImage,
          status: 'finished'
        }] : []
        this.productList = data.productImage ? [{
          imgUrl: data.productImage,
          status: 'finished'
        }] : []
        this.form.description = data.description
        this.form.headImage = this.uploadList.length && this.uploadList[0].imgUrl ? this.uploadList[0].imgUrl : ''
        this.form.productImage = this.productList.length && this.productList[0].imgUrl ? this.productList[0].imgUrl : ''
        this.openModal()
      })
    },
    onSave() {
      if (!this.form.headImage || !this.form.productImage) {
        this.$Notice.info({
          title: '温馨提示',
          desc:  '图标不能为空'
        })
        return
      }
      if (this.btnDisabled) return
      this.btnDisabled = true
      this.$refs["form"].validate(valid => {
        if (valid) {
          let text = this.id ? '编辑' : '新增'
          let url = this.id ? '/product/server/tag/update' : '/product/server/tag/add'
          let param = {
            name: this.form.name,
            description: this.form.description,
            productImage:  this.form.productImage,
            headImage: this.form.headImage
          }
          if (this.form.headImage.indexOf('http') == -1) {
            param.headImage = preFixPath + this.form.headImage
          }
          if (this.form.productImage.indexOf('http') == -1) {
            param.productImage = preFixPath + this.form.productImage
          }
          if (this.id) param.id = this.id
          this.$jsonPost(url, param).then(data => {
            this.$Notice.success({
              title: `${text}成功`
            })
            this.$emit('complete')
            this.closeModal()
          }).catch(() => {
            this.btnDisabled = false
          })
        } else {
          this.btnDisabled = false
        }
      })
    }
  }
}
</script>